$color__inactive: #616161;
$color__primary: #3F51B5;
$color__read: #9F9F9F;
$color__checkbox__star: #616161;

$height__search__title: 56px;
$margin-top__search__title: 42px;

:host {
  display: block;
  position: relative;
  height: 100%;
}

.inbox {
  height: 100%;

  .header {
    min-height: 200px;
    max-height: 200px;
    background: #039be5 url('/assets/images/background/header-bg.png') no-repeat center center fixed;
    background-size: cover;
  }

  .container {
    margin-top: -200px;
    max-height: 100%;
    box-sizing: border-box;
    height: 100%;
  }

  .navigation {
    padding: $margin-top__search__title 24px 0;

    .title-container {
      min-height: $height__search__title;
      max-height: $height__search__title;
      padding-left: 16px;
      padding-right: 16px;
      color: white;
      font-size: 28px;

      mat-icon {
        margin-right: 4px;
        height: 24px;
        width: 24px;
        font-size: 24px;
        vertical-align: sub;
      }

      .title {
        vertical-align: middle;
      }
    }

    .compose-container {
      margin: 52px 16px 0 12px;

      .compose {
        padding-left: 20px;
        padding-right: 32px;
        width: 100%;

        mat-icon {
          margin-right: 10px;
        }
      }
    }

    .nav-list {
      margin-top: 28px;

      .nav-item {
        color: $color__inactive;
        margin: 8px 0;

        .nav-title {

          .icon {
            margin-right: 12px;
            font-size: 22px;
            width: 22px;
            height: 22px;
          }

          .text {
            font-size: 14px;
          }

          .icon, .text {
            font-weight: 500;
            vertical-align: middle;
          }
        }

        &.active {
          color: #3F51B5;
        }
      }
    }

    mat-divider {
      margin: 0 16px;
    }
  }

  .content-container {
    max-width: 100%;
    height: 100%;

    .search {
      margin-top: $margin-top__search__title;
    }

    .mails-container {
      margin-top: 43px;
      background: white;
      position: relative;
      height: 100%;
      overflow-y: hidden;
    }
  }
}

@media only screen and (min-width: 1280px) {
  .inbox {
    .content-container {
      max-width: calc(100% - 290px); // 250px sidebar + 40px margin
    }
  }
}
